<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="shortcut icon" href="mi-logo.png"/>
    <link rel="stylesheet" href="index.css"/>
</head>
<body>
    <!--顶部导航-->
    <div class="topbar">
        <div class="topbar-nav-l">
            <a href="#">小米商城</a>
            <a href="#">MIUI</a>
            <a href="#">云服务</a>
            <a href="#">金融</a>
            <a href="#">有品</a>
            <a href="#">下载app</a>
            <a href="#">智能生活</a>
            <a href="#">企业团购</a>
            <a href="#">协议规则</a>
        </div>
        <div class="topbar-nav-r">
            <div class="topbar-info">
                <a href="#">登录</a>
                <a href="#">注册</a>
                <a href="#">消息通知</a>
            </div>
            <div class="car">
                <a href="#">购物车<span>(0)</span></a>
            </div>
        </div>
    </div>
    <!--搜索区域-->
    <div class="header">
        <div class="header-logo">
            <a href="#"><image src="mi-logo.png" alt="小米官网"> </a>
        </div>
        <div class="wrapper">
            <div class="header-nav">
                <ul>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">空调</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">新品</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">智能硬件</a></li>
                </ul>
            </div>
            <div class="header-search">
                <input type="search" name="keyword" class="search-box" title="请输入搜索内容">
                <input type="submit" value="搜索" class="search-btn">
            </div>
        </div>
    </div>
    <!--内容-->
    <div class="banner">
        <image class="banner-img" src="img/seckill-head.jpg" alt=""/>
        <div class="banner-body wrapper">
            <div id="scroll" class="body-nav">
                <ul id="tabs">
                    <li class="active">
                        <em>18:00</em>
                        <em>即将开始<br>
                        距开始还有01:39:37</em>
                    </li>
                    <li><em>20:00</em> 即将开始</li>
                    <li><em>22:00</em> 即将开始</li>
                    <li><em>00:00</em> 明日开始</li>
                    <li><em>08:00</em> 明日开始</li>
                </ul>
            </div>
            <div id="lists" class="body-container clearfix">
                <ul class="active">
                    <li>
                        <image src="img/1.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米移动电源2C</a>
                            <p class="tips">大容量，一个就够用</p>
                            <p class="price">1元 <del>129元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有9362人设置提醒</p>
                        </div>
                    </li>
                    <li>
                        <image src="img/2.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米电视4C 32英寸 黑色（可选）</a>
                            <p class="tips">高清液晶屏，人工智能系统</p>
                            <p class="price">499元 <del>900元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有32698人设置提醒</p>
                        </div>
                    </li>
                    <li>
                        <image src="img/3.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米90分旅行箱 1A 26英寸</a>
                            <p class="tips">长途旅行必备单品</p>
                            <p class="price">1元 <del>499元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有87123人设置提醒</p>
                        </div>
                    </li>
                    <li>
                        <image src="img/2.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米电视4C 32英寸 黑色（可选）</a>
                            <p class="tips">高清液晶屏，人工智能系统</p>
                            <p class="price">499元 <del>900元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有32698人设置提醒</p>
                        </div>
                    </li>
                    <li>
                        <image src="img/3.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米90分旅行箱 1A 26英寸</a>
                            <p class="tips">长途旅行必备单品</p>
                            <p class="price">1元 <del>499元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有87123人设置提醒</p>
                        </div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <image src="img/1.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米移动电源2C</a>
                            <p class="tips">大容量，一个就够用</p>
                            <p class="price">1元 <del>129元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有9362人设置提醒</p>
                        </div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <image src="img/2.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米电视4C 32英寸 黑色（可选）</a>
                            <p class="tips">高清液晶屏，人工智能系统</p>
                            <p class="price">499元 <del>900元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有32698人设置提醒</p>
                        </div>
                    </li>
                    <li>
                        <image src="img/3.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米90分旅行箱 1A 26英寸</a>
                            <p class="tips">长途旅行必备单品</p>
                            <p class="price">1元 <del>499元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有87123人设置提醒</p>
                        </div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <image src="img/3.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米90分旅行箱 1A 26英寸</a>
                            <p class="tips">长途旅行必备单品</p>
                            <p class="price">1元 <del>499元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有87123人设置提醒</p>
                        </div>
                    </li>
                    <li>
                        <image src="img/1.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米移动电源2C</a>
                            <p class="tips">大容量，一个就够用</p>
                            <p class="price">1元 <del>129元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有9362人设置提醒</p>
                        </div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <image src="img/3.png" alt=""></image>
                        <div class="container-info">
                            <a href="#" class="name">小米90分旅行箱 1A 26英寸</a>
                            <p class="tips">长途旅行必备单品</p>
                            <p class="price">1元 <del>499元</del></p>
                            <a href="#" class="btn">登录后抢购</a>
                            <p class="remind">已有87123人设置提醒</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="body-notice">
            *小米秒杀活动规则:<br>
            1.秒杀商品是否参加活动、最终秒杀成功的商品，以订单结算页显示为准，活动包括但不限于优惠券、赠品、满减、满赠等；<br>
            2.秒杀商品数量有限，活动以下单支付成功为准，请加入购物车后尽快下单支付;<br>
            3.秒杀价不含运费，最终以订单结算页价格为准；<br>
            4.订单中商品的数量、颜色、型号等，以订单结算页为准。 温馨提示:因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，如您发现活动商品标价或促销信息有异常，请您立即联系小米客服，以便我们及时补正。
            </div>
        </div>
    </div>
    <!--页尾标注-->
    <div class="footer wrapper">
        <div class="footer1">
            <ul>
                <li><a href="#">预约维修服务</a></li>
                <li><a href="#">7天无理由退货</a></li>
                <li><a href="#">15天免费换货</a></li>
                <li><a href="#">满69包邮</a></li>
            </ul>
        </div>
        <div class="footer2">
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">账户管理</a></dd>
                <dd><a href="#">购物指南</a></dd>
                
            </dl>
            <dl>
                <dt>服务支持</dt>
                <dd><a href="#">售后服务</a></dd>
                <dd><a href="#">自助服务</a></dd>
                <dd><a href="#">相关下载</a></dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd><a href="#">小米之家</a></dd>
                <dd><a href="#">服务网点</a></dd>
                <dd><a href="#">授权旗舰店</a></dd>
            </dl>
            <dl>
                <dt>关于小米</dt>
                <dd><a href="#">了解小米</a></dd>
                <dd><a href="#">加入小米</a></dd>
                <dd><a href="#">廉洁客服</a></dd>
            </dl>
            <div class="footer-r">
                <h1>400-100-5678</h1>
                <p>9:00-18:00（仅收市话费）</p>
            </div>
        </div>
    </div>
    <script src="js/index.js"></script>

</body>
</html>